/*
 * @Author: your name
 * @Date: 2022-03-30 09:38:07
 * @LastEditTime: 2022-04-10 20:17:57
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \erp-management-system1\src\views\AfterSale\AfterSaleList.jsx
 */

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom'
import { Button, Row, Col, Input, Badge } from 'antd';
import { CloudDownloadOutlined, PlusCircleOutlined, SettingOutlined, UpOutlined, DownOutlined } from '@ant-design/icons';
import '../AfterSale/AfterSaleList.css'


//售后列表
import Aftersalelistbd from './jsx/AfterSalelistbd';
// 高级搜索
import Advancedsearch from './jsx/Advancedsearch'
import SelfSeting from './slefSeting'

//新增售后
// import Newaftersalessearchbox from '../AfterSale/jsx/Newaftersalessearchbox'
//新增售后页面2
// import Newaftersalessearch2 from '../AfterSale/jsx/Newaftersalessearch2'


const AfterSaleList = () => {
    const list = ['售后列表', '已处理', '处理中', '未处理'];
    // 是否显示高级搜索
    const [isHighSearch, setIsHighSearch] = useState(false)
    // 显示和隐藏菜单
    const showHiddenForm = () => {
        setIsHighSearch(!isHighSearch)
    }
    // 跳转路由控件
    const navigate = useNavigate()
    //显示隐藏高级收索变量
    // const [changeHeiht, setHeight] = useState('form-contanier2')
    //显示隐藏自定义设置变量
    const [changeSeting, setchangeSeting] = useState('selfSeting2')
    //显示隐藏自定义设置
    function showSetingHeadle() {
        // console.log("showSeting");
        changeSeting === 'selfSeting2' ? setchangeSeting('selfSeting1') : setchangeSeting('selfSeting2')
    }


    return (
        <div className='box'>
            <Row>
                {/* 左侧按钮框 */}
                <Col span={12}>
                    {
                        list.map((item, index) => {
                            return <Button className='btn-bg-1' key={index} type="primary">{item}
                                <Badge count={1} ></Badge></Button>
                        })
                    }
                    <Button className='btn-bg-3' icon={<CloudDownloadOutlined />}>数据导出</Button>
                    <Button className='btn-bg-4' icon={<PlusCircleOutlined />} onClick={() => { navigate('/afterSale/newaftersalesBox') }}>新增售后</Button>
                    <Button size='small' className='btn-bg-5' type="danger" icon={<SettingOutlined />} onClick={showSetingHeadle} >自定义设置</Button>

                </Col>
                <Col span={6}></Col>
                {/* 右侧按钮 */}
                <Col span={6}>
                    <Input style={{ width: '50%' }} placeholder="客户名称、手机号码、反馈主题" />
                    <Button className='btn-bg-6' >搜索</Button>
                    {/* 切换搜索状态 */}
                    {
                        isHighSearch ?
                            <Button className='btn-bg-7' type="danger" onClick={() => { showHiddenForm() }}>高级搜索<UpOutlined /></Button> :
                            <Button className='btn-bg-7' type="danger" onClick={() => { showHiddenForm() }}>高级搜索<DownOutlined /></Button>
                    }
                </Col>
            </Row>
            {/* 高级搜索表单部分 */}
            {
                isHighSearch ?
                    (

                        < Advancedsearch />
                    ) : <></>
            }
            {/* 导入售后列表 */}
            <Aftersalelistbd />

            {/* 新增售后组件 */}
            {/* <Newaftersalessearchbox/> */}
            {/* 新增售后页面2 */}
            {/* <Newaftersalessearch2 /> */}
            <section className={changeSeting}>
                <SelfSeting changeSeting={showSetingHeadle} />
            </section>
        </div>
    );
}

export default AfterSaleList;
